<template>
  <div style="padding: 5px 0">
    <!--    {{searchDate}}-->


    <a-row style="width: 100%" type="flex" justify="start" :gutter="[20,70]">
      <a-col v-for="good in orgGoodList" :xs="12" :sm="8" :lg="8" :xl="6"  :key="good.id" style="box-sizing: border-box;">
        <good-card @show-tooltip="(e)=>{state.showTooltipId=e}" :hoverMove="true" :hovered="true" :canShowTooltip="state.showTooltipId==null||state.showTooltipId==good.id" :showAddButton="true" @refresh="refresh" @click="toGoodPage(good.id)" style="height: 100%;cursor: pointer;box-sizing: border-box;margin: 12px;"
                   :goodInfo="good"></good-card>
      </a-col>
    </a-row>
  </div>

</template>

<script>
import {computed, defineComponent, onMounted, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router"

export default defineComponent({
  name: "GoodItemList",
  props: {
    'searchState': {},
    'goodList': {
      default: null
    }
  },
  setup(props) {
    const route = useRoute();
    const router = useRouter();

    const searchDate = computed(() => {
      return {
        path: route.query,
        params: route.params
      }
    })

    const testData = {
      mainImage: 'https://secure.img1-fg.wfcdn.com/im/05698932/resize-h310-w310%5Ecompr-r85/1286/128655343/Parikh+54.1%27%27+H+x+22.1%27%27+W+Steel+Etagere+Bookcase.jpg',
      name: 'zqxwsed',
      producer: '12343wd',
      price: 1231,
      isDiscount: true,
      currentPrice: 12311,
    }

    const orgGoodList = computed(() => props.goodList == null ? null : props.goodList);

    const refresh = async (id) => {
      //刷新这个ID对应的good
    }

    const goodMap = ref(new Map());

    watch(() => orgGoodList.value, (nval) => {
      if (nval != null) {
        goodMap.value = new Map();
        for (let i = 0; i < nval.length; i++) {
          goodMap.value.set(nval[i].id, nval[i])
        }
      }
    })

    const toGoodPage = (id) => {
      if (id == null) return;
      router.push({
        name: '商品页面',
        params: {
          id: id
        }
      })
    }

    const goodList = computed(() => {
      let list = [];
      for (let valueElement of goodMap.value) {
        list.push(valueElement[1])
      }
      return list
    })

    const grid=ref(null);

    const state=reactive({
      showTooltipId:null
    })

    return {
      state,
      grid,
      searchDate,
      goodList,
      orgGoodList,
      refresh,
      toGoodPage,
      testData
    }
  }
})
</script>

<style scoped>

</style>
